<template>
    <div>
        <el-upload :action="$http.defaults.baseURL + '/carousel/backend/add'" list-type="picture-card" 
            :auto-upload="false" ref="upload" multiple 
            accept=".jpg,.jpeg,.png" :before-upload="beforeUpload"
            :on-success="onSuccess" :on-error="onError"
            :headers="{authorization: token}"
            :data="{id}" name="carousel" :limit="1">
            <!-- + 号 -->
            <i slot="default" class="el-icon-plus"></i>
            <!-- 图片缩略图 -->
            <div slot="file" slot-scope="{file}">
                <!-- 图片 -->
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <!-- 操作选项 -->
                <span class="el-upload-list__item-actions">
                    <!-- 查看大图 -->
                    <span class="el-upload-list__item-preview" @click="enlarge(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- 删除 -->
                    <span class="el-upload-list__item-delete" @click="remove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <!-- 预览大图 -->
        <el-dialog :visible.sync="isEnlarge">
            <img width="100%" :src="enlargeImgUrl" alt="">
        </el-dialog>
        <!-- 点击提交至服务器 -->
        <el-button type="primary" class="btn" @click="submitImg">添加轮播图</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //放大的图片地址
            enlargeImgUrl: '',
            //是否放大
            isEnlarge: false,
            //管理员 id 和 token
            id: this.$store.state.uid,
            token: this.$store.state.token,
        };
    },
    methods: {
        //删除图片
        remove(file) {
            //调用曲柄删除
           this.$refs.upload.handleRemove(file);
        },
        //放大图片
        enlarge(file) {
            //修改 url
            this.enlargeImgUrl = file.url;
            //标记
            this.isEnlarge = true;
        },
        //上传至服务器
        submitImg() {
            //调用曲柄提交
            this.$refs.upload.submit();
        },
        //上传前检查格式
        beforeUpload(file) {
            //如果不是图片
            if (!file.type.startsWith('image')) {
                //输出格式错误，会自动在缩略图中删除
                alert(file.name + '文件格式错误');
                return false;
            }
        },
        //上传成功
        onSuccess(res, file) {
            //如果代码为 1 则添加成功
            if (res.code == 1) {
                //提示添加成功
                alert('添加轮播图' + file.name + '成功');
                //在缩略图中删除该图片
                this.$refs.upload.handleRemove(file);
            } else {
                //否则失败
                alert('添加轮播图' + file.name + '失败');
            }
        },
        //上传失败
        onError(err) {
            //弹窗提醒，可能是请求地址错误，可能是断网
            alert('上传至服务器失败');
            //控制台输出错误信息
            console.log(err);
        }
    }
}
</script>

<style scoped>
.btn {
    width: 120px;
    margin-top: 15px;
    margin-left: 14px;
}
</style>